<template>
  <div class="file-import-win">
    <!-- 文件导入 -->
    <el-dialog
      title="继续导入"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="450px"
      :before-close="closeDialog"
    >
      <div slot="title" class="dialog_title">
        <div class="dt_text1">继续导入</div>
        <div class="dt_text2">文件编号：{{ titleData.id }}</div>
        <div class="dt_text2 sl_text">文件名称：{{ titleData.file_name }}</div>
      </div>
      <el-form label-position="left" label-width="62px" :model="formData" size="mini" ref="formref">
        <el-form-item label="上传文件:" style="margin-top: 24px">
          <el-upload
            :http-request="() => {}"
            :on-change="upload_change"
            :before-upload="upload_before"
            :action="apis.importFileRecordSave"
            :show-file-list="false"
          >
            <el-button type="primary">上传文件</el-button>
            <el-button style="margin-left: 10px" @click.stop="downLoadTemp">下载模板</el-button>
            <div
              style="text-align: left;color: #000;cursor: default;"
              @click.stop="() => {}"
              v-if="file_full_name"
            >{{file_full_name}}</div>
            <div class="el-upload__tip" slot="tip">
              <div class="up-title">标注：</div>
              <div class="tip-item">1. 仅支持excel、csv格式，文件不超过10M</div>
              <div class="tip-item">2. 文件上传时，请不要改变模板标题；</div>
              <div class="tip-item">3. “对象编号、对象名称、地址、城市”必填，“详情选填”；</div>
              <div class="tip-item">4. 详情列可以增加多个字段内容，不同字段用分号隔开，</div>
              <div class="tip-item">&nbsp;&nbsp;&nbsp;&nbsp;例：面积：100平米；租金：100万元；此地还处于打桩阶段；</div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item style="margin-top: 60px">
          <el-button size="mini" type="primary" @click="submitClick('formref')">提交</el-button>
          <el-button size="mini" @click="closeDialog">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { downLoadTempFunc, fileByBase64 } from "@/utils/index";

export default {
  props: {
    visible: Boolean,
    onOk: Function,
    confirmSubmit: Function,
    titleData: Object,
  },
  data() {
    return {
      formData: {
        import_file_record_id: "",
        file_data: "",
      },
      file_full_name: "",
    };
  },
  methods: {
    closeDialog() {
      this.onOk();
    },
    async submitClick() {
      if (!this.formData.import_file_record_id || !this.formData.file_data) {
        return this.$message.warning("请上传文件！");
      }
      const res = await this.axios.post(
        this.apis.importFileRecordcontinueSave,
        this.formData
      );
      if (res.retCode === 2000) {
        this.$message.success("提交成功!");
        this.onOk();
      }
    },
    upload_change(file) {
      this.file = file.raw;
    },
    async upload_before(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx" && extension !== "xls" && extension !== "csv") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
        return;
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
        return;
      }

      if(file.name.split('.')[0] !== this.titleData.file_name){
        this.$message({
          message: `非同名模板不让导入!,请修改文件名为${this.titleData.file_name}的文件`,
          type: 'warning',
          duration: 5000
        })
        return
      }

      // this.formData.file_data = await fileByBase64(this.file);
      // this.formData.file_full_name = file.name;
      // this.formData.file_name = file.name.split(".")[0];
      this.formData.import_file_record_id = this.titleData.id;
      this.formData.file_data = await fileByBase64(this.file);
      this.file_full_name = file.name;

      console.log(this.formData, "this.formData");
    },
    async downLoadTemp() {
      const res = await this.axios({
        method: "GET",
        url: this.apis.importFileRecordTemplate,
        responseType: "blob",
      });
      downLoadTempFunc(res);
    },
  },
};
</script>

<style>
.sl_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}
</style>
